<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
  <title>iScroll</title>
  <link rel="shortcut icon" href="../assets/img/logo.png" type="image/x-icon"/>
  <script src="js/iscroll.js"></script>
  <style>
    /*------------全局样式-----------*/
    html, body, ul, li, span, p, div,
    a, form, input, button, img, h1,
    h2, h3, h4, h5, h6, header, td,
    th, dd, dl, tr, table, footer, main,
    aside, article, section, select, option {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    html {
      font-size: 100px;
    }

    body {
      font-size: 16px;
    }

    ul, li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    #app {
      width: 100vw;
      display: flex;
      height: 100vh;
      border: 1px solid black;
      overflow: hidden;
    }

    #app .left-wrap {
      width: 30%;
      border: 1px solid blue;
    }


    #app .right-wrap {
      width: 70%;
    }
  </style>

</head>
<body>
<div id="app">
  <div class="left-wrap">
    <div class="left-scroll-item">
      <p style="background: blue;"><strong>This demo shows the minimum CSS/HTML/JS configuration you need to run the iScroll. Look at the source code for details.</strong></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
        vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
        porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
        Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
        velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesenti
    </div>
  </div>
  <div class="right-wrap">
    <div class="right-scroll-item">
      <p style="background: blue;"><strong>This demo shows the minimum CSS/HTML/JS configuration you need to run the iScroll. Look at the source code for details.</strong></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
        vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
        porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
        Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
        velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesenti
    </div>
  </div>
</div>
<script>
  //阻止移动端默认的移动事件
  document.addEventListener('touchmove', function(e) {
    e.preventDefault()
  }, { passive: false })
  //声明对象
  let leftScroll = new IScroll('.left-wrap', {
    mouseWheel: true,
    scrollbars: true
  })
  console.dir(leftScroll.options)
  let rightScroll = new IScroll('.right-wrap', {})
</script>
</body>
</html>
<!--
  iscroll.js的使用步骤
  1、引入js文件
    <link rel="shortcut icon" href="../assets/img/logo.png" type="image/x-icon"/>
  2、声明元素区域
    <div class="left-wrap">
      <div class="left-scroll-item">
        <p><strong>This demo shows the minimum CSS/HTML/JS configuration you
         need to run the iScroll. Look at the source code for details.</strong></p>
      </div>
    </div>
    -- left-wrap是滚动容器，其中的第一个直接子元素才可以滚动，要求left-wrap要有指定的高度和宽度，同时设置overflow: hidden
    -- left-scroll-item是滚动项目，此元素的‘内容’高度一定是超出父级left-wrap元素，才有滚动效果
  3、声明元素js对象
    let leftScroll = new IScroll('.left-wrap', {})
    let rightScroll = new IScroll('.right-wrap', {})
    -- 最好是在页面加载结束时声明
    -- new IScroll('.left-wrap', {}) 是构造函数
    -- .left-wrap 是选择器
    -- {} 配置项
-->
